<template>
  <div id="tanc_history">
    <div class="historyHeader">
      <b>审核记录表</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <component v-bind:is="currentHistoryChild.content" v-bind="tableData.at(tableChooseIndex)">
    </component>
  </div>


<el-container>
  <el-header class="auditor_header">
    历史审核记录
  </el-header>
  <el-main>
    <el-row style="margin-left: 10px">
      <el-radio-group v-model="radio1" class="ml-4" @change="changeRadio">
        <el-radio :label="0" size="large">全部审核查看</el-radio>
        <el-radio :label="1" size="large">已批准的审核查看</el-radio>
        <el-radio :label="2" size="large">未批准的审核查看</el-radio>
      </el-radio-group>

    </el-row>
      <el-table :data="tableData" stripe border v-if="exist" style="width: 100%;">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="auditLogsId" label="审核id"  />
      <el-table-column prop="realName" label="申报人"  />
      <el-table-column prop="applyDate" label="申报时间"  />
      <el-table-column prop="auditDate" label="审核时间"  />
      <el-table-column  label="操作"  >
        <template v-slot:default='scope'>
          <el-button  type="primary" @click="detailedHistory(scope.row.auditLogsId)">查看详情</el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleteHistory(scope.row.auditLogsId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      </el-table>

      <el-table :data="noData" stripe border v-if="!exist" style="width: 100%;">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="auditLogsId" label="审核id"  />
        <el-table-column prop="realName" label="申报人"  />
        <el-table-column prop="applyDate" label="申报时间"  />
        <el-table-column prop="auditDate" label="审核时间"  />
        <el-table-column  label="操作"  >
          <template v-slot:default='scope'>
            <el-button  type="primary" @click="detailedHistory(scope.row.auditLogsId)">查看详情</el-button>
            <el-popconfirm title="确定要删除吗?" @confirm="deleteHistory(scope.row.auditLogsId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

  </el-main>

  <el-footer>
    <el-config-provider :locale="locale">
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          @current-change="changePage"
          @size-change="changePage"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </el-config-provider>

  </el-footer>
</el-container>
  <div id="hidebg"></div>

</template>

<script>
import axios from "axios";
import historyChild from "@/router/auditor/history/historyChild";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {ElMessage} from "element-plus";
export default {
  name: "historyRecord",
  components:{
    // eslint-disable-next-line vue/no-unused-components
    historyChild:historyChild
  },
  data(){
    return{
      exist:true,
      locale:zhCn,
      currentHistoryChild:{
        content:historyChild
      },
      showDetail:false,
      radio1:0,
      noData:[],
      tableData:[],
      tableIndex:1,
      currentPage:1,
      pageSize:10,
      total:0,
      tableChooseIndex:0,
      visibleTable:true,
    }
  },
  mounted() {
    this.changePage()
  },
  methods:{
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    changeRadio(){
      this.currentPage=1
      this.pageSize=10
      this.changePage()
    },
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('tanc_history') .style.display='none'
    },

    detailedHistory:function (a){
      //根据序号a展示历史记录详情
      for(let i=0;i<this.total;i++){
        if(this.tableData.at(i).auditLogsId===a){
          this.tableChooseIndex=i
        }
      }
      var hideobj=document.getElementById("hidebg");
      hideobj.style.display="block";  //显示隐藏层
      //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
      document.getElementById("tanc_history").style.display="block";  //显示弹出层
    },
    deleteHistory:function (a){
      //根据序号a删除历史记录详情
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/audit/delete',
        data: {
          auditLogsId: a,
          username: user.username,
        },
      })
          .then((res)=>{
            if(res.data.code==="1"){
              // alert("删除成功")
              ElMessage.success('删除成功')
              this.changePage();
            }else{
              // alert("删除失败")
              ElMessage.error('删除失败')
            }
          });
    },
    changePage:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'get',
        url: '/api/audit'+'/'+this.currentPage+'/'+this.pageSize+'/'+user.username+'/'+this.radio1,
      })
          .then((res)=>{
            this.total=res.data.data.number
            if(this.total===0){
              this.exist=false


            }
            else if(this.total<=(this.currentPage-1)*10){

              this.currentPage-=1
              this.changePage()
            }
            else{
              this.exist=true
              this.tableData=res.data.data.data
              for(var i=0;i<this.tableData.length;i++){
                this.tableData[i]['no']=i+1;
              }
            }

          });
    }
  }

}
</script>

<style scoped>

#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color:#000;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
.historyHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
#tanc_history{
  display: none;
  transform: translate(-50%,-50%);
  height: 590px;
  width: 700px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-pagination{
  justify-content: center !important;
}







</style>